<template>
    <div id="orderList">
        <el-dialog
                :visible="isVisible"
                :show-close="false"
                :title="title"
            >
            <div id="createOrder"  v-if="showType===0">
                <div style="padding: 20px">
                    <span style="margin-left: 50px">所属车库：</span>
                    <el-select :value="createForm.parkingId" v-model="createForm.parkingId"
                               :clearable="true"
                               @change="getCarPlaceOption"
                               placeholder="选择车场">
                        <el-option  v-for="item in parkingOption"
                                    :key="item.id"
                                    :label="item.parkingName"
                                    :value="item.id"></el-option>
                    </el-select>
                    <span style="margin-left: 20px">车位：</span>
                    <el-select :value="createForm.carPlaceId" v-model="createForm.carPlaceId"
                               :clearable="true"
                               placeholder="选择车位">
                        <el-option  v-for="item in carPlaceOption"
                                    :key="item.id"
                                    :label="item.carPlaceTypeName"
                                    :value="item.id">
                            <span style="float: left">编号：{{ item.id }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.carPlaceTypeName }}</span>
                        </el-option>
                    </el-select>
                </div>
                <div style="padding: 20px">
                    <span style="margin-left: 50px">车牌号：</span>
                    <el-select v-model="createForm.plateNum"
                               :value="createForm.plateNum"
                               placeholder="选择车牌"
                    >
                        <el-option v-for="item in carNumOption"
                                   :key="item.id"
                                   :label="item.plateNum"
                                   :value="item.plateNum"
                        ></el-option>
                    </el-select>
                </div>
                <div style="text-align: center">
                    <el-button type="primary" size="mini" @click="addOrder">确定</el-button>
                    <el-button size="mini" @click="cancel">关闭</el-button>
                </div>
            </div>
            <div id="modifyOrder" v-if="showType===1">
                <div >
                    <el-tabs value="orderInfo" tab-position="left" >
                        <el-tab-pane label="订单信息" name="orderInfo">
                            <el-form :v-model="orderModel" label-width="15%" >
                                <el-form-item label="订单编号" >
                                    <el-input :disabled="isDisable" :value="orderModel.orderNum" style="width: 200px"></el-input>
                                    <span style="margin-left: 20px">车牌号：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.plateNum" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="用户姓名：">
                                    <el-input :disabled="isDisable" :value="orderModel.userName" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">用户账号：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.account" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="所属车场：">
                                    <el-input :disabled="isDisable" :value="orderModel.parkingName" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">车位id：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.carPlaceId" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="收费标准：">
                                    <el-input :disabled="isDisable" :value="orderModel.ruleCode" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">联系电话：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.phone" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="订单状态：">
                                    <el-input :disabled="isDisable" :value="orderModel.orderStatusValue" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">支付状态：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.payStatusValue" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="入库时间：">
                                    <el-input :disabled="isDisable" :value="orderModel.startTime" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">出库时间：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.endTime" style="width: 200px;"></el-input>
                                </el-form-item>
                                <el-form-item label="停车时间：">
                                    <el-input :disabled="isDisable" :value="orderModel.parkingTime" style="width: 200px;">
                                        <template slot="append">小时</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="总金额">
                                    <el-input :disabled="isDisable" :value="orderModel.totalPay" style="width: 200px;"></el-input>
                                    <span style="margin-left: 20px">实付金额：</span>
                                    <el-input :disabled="isDisable" :value="orderModel.actualPay" style="width: 200px;"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="text-align: center">
                    <el-button type="primary" size="mini" @click="cancel">确定</el-button>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import Message from "../../../components/messages"
    export default {
        name: "orderDialog",
        props:{
            orderData:{
              type:Object,
              default: null
            },
            isVisible:{
                type:Boolean,
                default:false
            },
            isModify:{
                type:Boolean,
                default:false
            },
            showType:{
                type:Number,
                default:0
            },
            title:{
                type:String,
                default:""
            },
            parkingOption:null
        },
        data(){
            return{
                carPlaceOption:[],
                carPlaceType:[],
                isDisable:true,
                createForm:{
                    userName: null,
                    userId: null,
                    carPlaceId:null,
                    plateNum:"",
                    parkingId:null,
                },
                orderModel:{},
                carNumOption:[],
            }
        },
        watch:{
            orderData:function () {
                if(this.showType===1){
                    this.orderModel =this.orderData;
                    if(this.orderModel.startTime!==null){
                        this.orderModel.startTime=this.$moment(this.orderModel.startTime).format("YYYY-MM-DD HH:mm:ss");
                    }
                    if(this.orderModel.endTime){
                        this.orderModel.endTime=this.$moment(this.orderModel.endTime).format("YYYY-MM-DD HH:mm:ss");
                    }
                }
            },
        },
        methods:{
            addOrder(){
                if(this.createForm.carPlaceId==null||this.createForm.parkingId==null||this.createForm.plateNum==null){
                    Message.warning("请完善信息!");
                    return;
                }
                this.$http.get("/parkingOrder/judgePlateNumStatus/"+this.createForm.plateNum).then((res)=>{
                    if(res.status===200){
                        if(res.data.code==="1"){
                            Message.warning(res.data.message);
                        }else{
                            this.$http.post("parkingOrder/createParkingOrder",this.createForm).then((res)=>{
                                if(res.status===200){
                                    if(res.data.isCreated===true){
                                        Message.success(res.data.message);
                                        this.createForm.parkingId=null;
                                        this.createForm.carPlaceId=null;
                                        this.$emit("close");
                                        this.$emit("getList");
                                    }
                                }
                            })
                        }
                    }
                })
            },
            cancel(){
                this.$emit("close")
            },
            getCarNumOption(){
                let user = JSON.parse(localStorage.getItem("user"));
                this.createForm.userId=user.id;
                this.createForm.userName=user.userName;
                this.$http.post("/userPlateBind/page",{
                    pageSize:10,
                    pageNum:1,
                    clauses:[
                        {
                            column:"userId",
                            operation:"=",
                            value:user.id
                        }
                    ]
                }).then(res=>{
                    if (res.status===200){
                        this.carNumOption = res.data.list;
                    }
                })
            },
            getCarPlaceType(){
                this.$http.post("coder/getCoderByeCodeKey",{codeKey:"carPlaceType"}).then(res=>{
                    if(res.status===200){
                        this.carPlaceType=res.data
                    }
                });
            },
            getCarPlaceOption(){
                if(this.createForm.parkingId==null){
                    this.carPlaceOption=[];
                    this.createForm.carPlaceId=null;
                }else{
                    this.$http.get("carPlace/getCarPlaceByParkingId/"+this.createForm.parkingId).then((res)=>{
                        if(res.status===200){
                            this.carPlaceOption=res.data;
                            for(let i=0;i<this.carPlaceOption.length;i++){
                                for(let j=0;j<this.carPlaceType.length;j++){
                                    if(this.carPlaceOption[i].carPlaceType===this.carPlaceType[j].id){
                                        this.carPlaceOption[i].carPlaceTypeName=this.carPlaceType[j].valueDesc;
                                    }
                                }
                            }
                        }
                    })
                }
            }
        },
        mounted() {
            this.getCarNumOption();
            this.getCarPlaceType();
        }
    }
</script>

<style scoped lang="less">
    .searchInput{
        width:100px;
        height: 20px;
        margin-left: 10px;
    }

</style>